<template>
	<z-paging ref="paging"  v-model="infoList" @query="queryList">
		<view class="bg" ></view>
		<view style="margin-top: -96rpx;width: 100%;">
			<view v-for="item in infoList" class="itemView" @click="clickItem(item)">
				<image src="../../../static/policy_img.png" class="img"></image>
				<text class="contentText">{{item.Title}}</text>
				<view class="time">
					<text style="color: #999999;flex: 1;">{{item.CreateTime}}</text>
					<image src="../../../static/eye.png" style="width: 30rpx;height: 21rpx;"></image>
					<text style="color: #9C9C9C;margin-left: 6rpx;">{{item.ViewCount}}</text>
				</view>
			</view>
		</view>
	</z-paging>
</template>

<script>
	import {
		GetListNews
	} from "@/common/api.js"
	export default {
		data() {
			return {
				infoList: []
			}
		},
		
		onLoad() {
		},
		
		methods: {
			async queryList(pageNo, pageSize) {
				var that = this
				var data = {
					Title:'',
					zltype:'2',
					page: pageNo,
					size: pageSize
				}
				let res = await GetListNews(data)
				this.$refs.paging.complete(res.response.data);
			},
			
			clickItem(item) {
				uni.navigateTo({
					url:'/pages/Home/Details/Details?item='+encodeURIComponent(JSON.stringify(item))
				})
			},
		}
	}
</script>

<style>
	page {
		height: 100%;
		background: #F4F4F4;
		display: flex;
		flex-direction: column;
	}
	
	.time {
		font-size: 24rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		line-height: 33rpx;
		display: flex;
		flex-direction: row;
		margin-top: 16rpx;
		margin-bottom: 25rpx;
		margin-left: 114rpx;
		margin-right: 24rpx;
		align-items: center;
	}
	
	.contentText {
		/*高度自动*/
		display: inline-block;
		/*转为行内块元素*/
		white-space: pre-wrap;
		/*处理元素内的空白,保留空白符序列，但是正常地进行换行*/
		word-wrap: break-word;
		/*允许长单词或 URL 地址换行到下一行,在长单词或 URL 地址内部进行换行*/
		margin-top: 24rpx;
		font-size: 34rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
		line-height: 48rpx;
		margin-left: 114rpx;
		margin-right: 24rpx;
	}
	
	.itemView {
		height: auto;
		background: #FFFFFF;
		border-radius: 16rpx;
		display: flex;
		flex-direction: column;
		margin-top: 24rpx;
		margin-left: 24rpx;
		margin-right: 24rpx;
	}
	
	.img {
		width: 60rpx;
		height: 60rpx;
		position: absolute;
		margin-top: 30rpx;
		margin-left: 24rpx;
	}
	
	.bg {
		background-image: url('../../../static/policy_bg.png');
		background-size: 100% 100%;width: 100%;height: 286rpx;
	}
</style>
